<template>
	<view>
		<view class="time" @click="show = true">
			{{starttimeText || '开始日期'}}
			<image src="../../static/bot-img.png" mode=""></image>
			<text>至</text>
			{{endtimeText || '结束日期'}}
			<image src="../../static/bot-img.png" mode=""></image>
		</view>
		
		<view class="box">
			<view class="each" v-for="i in orderList">
				<view class="name-box z-flex-x-s-b">
					<view class="">店铺名·24H自助台球(红旗路店)</view>
					<text style="color: #4BC264;" v-if="i.status == 1">进行中</text>
					<text style="color: #A4A9B7;" v-else>进行中</text>
				</view>
				<view class="billiards">畅打时间：8:00-15:00</view>
				
				<view class="z-margin-t-24"></view>
				<u-line length="622rpx" style="margin: auto;"></u-line>
				
				<view class="z-flex-x-s-b z-margin-t-24">
					<view class="minor">订单编号</view>
					<view class="main">{{i.orderId}}</view>
				</view>
				<view class="z-flex-x-s-b z-margin-t-24">
					<view class="minor">客户昵称</view>
					<view class="main">{{i.nickname}}</view>
				</view>
				<view class="z-flex-x-s-b z-margin-t-24">
					<view class="minor">手机号</view>
					<view class="main">{{i.mobile}} <text class="copy" @click="$copy(i.mobile)">复制</text> <text class="bohao" @click="dial(i.mobile)">拨号</text> </view>
				</view>
				<view class="z-flex-x-s-b z-margin-t-24">
					<view class="minor">开台时间</view>
					<view class="main">{{i.paytime | date('yyyy/mm/dd hh:MM')}}</view>
				</view>
			</view>
			
			<u-empty class="z-padding-tb-32" icon='https://cdn.uviewui.com/uview/empty/list.png'
				v-if="orderList.length == 0"></u-empty>
		</view>
		
		<u-calendar
			color="#4BC264"
			:minDate="minDate"
			:maxDate="maxDate"
			class="calendar"
			:show="show"
			mode="range"
			@close="onClose"
			:defaultDate="defaultDateMultiple"
			@confirm="onConfirm"
			monthNum="20"
		/>
	</view>
</template>

<script>
	const d = new Date()
		const year = d.getFullYear()
		let month = d.getMonth() + 1
		month = month < 10 ? `0${month}` : month
		const date = d.getDate()
	export default {
		data() {
			return {
				minDate: new Date(2023, 0, 1).getTime(),
				maxDate: new Date().getTime() + 86400000,
				show:false,
				defaultDateMultiple: [`${year}-${month}-${date}`],
				
				orderList:[],
				page:1,
				status: 'loadmore',
				flag: false,
				
				//显示开始结束日期
				starttimeText:'',
				endtimeText:'',
				
				starttime:'',
				endtime:'',
			}
		},
		onLoad() {
			this.getOrderList()
		},
		methods: {
			onConfirm(event) {
				console.log(event,'........')
				this.starttimeText = event[0]
				this.endtimeText = event[event.length - 1];
				const date = new Date(event[0]);
				this.starttime = Math.floor(date.getTime() / 1000);
				const date2 = new Date(event[event.length - 1]);
				this.endtime = Math.floor(date2.getTime() / 1000);
				this.show = false;
				this.page = 1
				this.orderList = []
				this.getOrderList()
			},
			getOrderList(){
				this.flag = false
				this.status = 'loading';
				
				this.$api.post('/storeCarefreeOrder', {
					page: this.page,
					starttime:this.starttime,
					endtime:this.endtime
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.lengt < 20) {
							this.status = 'nomore';
						} else {
							this.orderList = this.orderList.concat(res.data);
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {});
			},
			dial(e){
				uni.makePhoneCall({
					phoneNumber:e
				});
			},
			onClose() {
				this.show = false;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
	.time {
		font-weight: 500;
		font-size: 24rpx;
		color: #A4A9B7;
		padding: 32rpx 32rpx 0 32rpx;
		image {
			width: 12rpx;
			height: 12rpx;
			vertical-align: middle;
			margin-left: 16rpx;
		}
		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #1C274C;
			padding: 0 24rpx;
		}
	}
	
	.box {
		margin-top: 24rpx;
		.each {
			width: 622rpx;
			margin: auto;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx;
			margin-bottom: 24rpx;
			.name-box {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C274C;
				
				text {
					font-weight: 500;
					font-size: 22rpx;
				}
			}
			.billiards {
				font-weight: 500;
				font-size: 24rpx;
				color: #6B738B;
				margin-top: 12rpx;
			}
			.main {
				font-weight: 500;
				font-size: 24rpx;
				color: #1C274C;
				.copy {
					font-weight: 500;
					font-size: 24rpx;
					color: #A4A9B7;
					padding: 0 30rpx;
				}
				.bohao {
					color: #4BC264;
				}
			}
			.minor {
				font-weight: 500;
				font-size: 24rpx;
				color: #A4A9B7;
				.money-num {
					font-weight: bold;
					font-size: 28rpx;
					color: #FF7B18;
				}
			}
		}
	}
</style>
